<!DOCTYPE html>
<html lang="en">
	<head>
	
    <title>CBE BPE Toolkit - Sensor Configuration</title>

    <link href="/static/bootstrap/css/bootstrap.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="/static/pmp/css/plot.css"/>
    <style type="text/css">
      body {
        padding-top: 60px;
        padding-bottom: 40px;
      }
      .sidebar-nav {
        padding: 9px 0;
      }
    </style>
    <script type="text/javascript" src="/static/jquery-1.7.2/jquery-1.7.2.min.js"></script>
    <script src="/static/bootstrap/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="/static/jquery-formset/jquery.formset.js"></script>
    <script type="text/javascript" src="/static/sessvars/sessvars.js"></script>
	<script type="text/javascript">
    $(document).ready(function(){
    	$("li#" + window.location.pathname.substring(5, window.location.pathname.length - 1)).addClass("active")
        $('select').change(function() { 
        	projectId = $(this).val();
        	sessvars.sessionObj = {'projectId': projectId};
        	formRequest(projectId);
		});
		$('#loadDefault').click(function(){
			formRequest('default')
		})
		$('#loadBlank').click(function(){
			formRequest('blank')
		})
	});
	function formRequest(type){
			$.ajax({
				type: "POST",
				url: '/pmp/sensors/',
				data: {"projectId":projectId, 
					"select":type,
					},
				success: function(data){
					 $('#sensorForm').html(data);
					 $('#loadBlank').removeAttr("disabled")
					 $('#loadDefault').removeAttr("disabled")    
				}
			});
	}
    </script>


  </head>

  <body>
	{% include 'header.html' %}
        {% load widget_tweaks %}
        <div class="span10" id="mainContent">
        	<h4>Define project sensors</h4><br>
        	<p>
        	<button class="btn btn-small" id="loadDefault" disabled>Load default sensors</button>
        	<button class="btn btn-small" id="loadBlank" disabled>Load blank sensors</button>
        	</p>
	       		<div id="sensorForm">
	       		{% include 'display_inline.html' %}
	       		</div>

        </div><!--/span-->
      </div><!--/row-->
      <hr>
	{% include 'footer.html' %}

    </div><!--/.fluid-container-->
  </body>
<script>
	if (typeof sessvars.sessionObj == 'undefined'){sessvars.sessionObj = {'projectId': $('select#id_name').find("option:selected").val()};}
	if (typeof sessvars.sessionObj != 'undefined'){
		if (sessvars.sessionObj['projectId'] == ""){sessvars.sessionObj['projectId'] = $('select#id_name').find("option:selected").val();}
		else {
			for (var i=0;i<document.getElementById('id_name').options.length;i++) {
				if (document.getElementById('id_name').options[i].value == sessvars.sessionObj['projectId'])
					{document.getElementById('id_name').options[i].selected = true;}
			}
		}
	}
	projectId = sessvars.sessionObj['projectId'] 
	formRequest('select');
</script>  
</html>